<template>
  <a-card :bordered="false">
    <!-- 抽屉 -->
    <a-drawer
        title="字典列表"
        :width="screenWidth"
        :visible="visible"
        @close="visible=false"
    >
      <!-- 抽屉内容的border -->
      <div style="padding:10px;border: 1px solid #e9e9e9;background: #fff;">
        <a-form
            layout="inline"
            :model="condition"
            @submit="loadData"
        >
          <a-form-item>
            <a-input v-model:value="condition.itemValue" placeholder="请输入值"></a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-model:value="condition.itemText" placeholder="请输入名称"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">
              搜索
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="default" @click="reset">重置</a-button>
          </a-form-item>
        </a-form>
        <a-divider/>
        <div>
          <a-button style="margin-bottom: 20px" type="primary" @click="handleAdd">新增</a-button>

          <a-table
              v-if="dictId"
              :key="dictId"
              :loading="loading" :columns="columns" :data-source="data" :pagination="pagination" @change="handleChange">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'action'">
                <a-space>
                  <a href="javascript:void(0)" @click="handleEdit(record)">
                    <edit-outlined style="margin-right: 5px;"/>
                    编辑
                  </a>
                  <a-divider type="vertical"/>
                  <a-popconfirm
                      key="remove"
                      title="确定删除吗?"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="handleRemove(record)"
                  >
                    <a href="javascript:void(0)" style="color:red">
                      <delete-outlined style="margin-right: 5px;"/>
                      删除
                    </a>
                  </a-popconfirm>
                </a-space>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </a-drawer>
    <dict-item-modal ref="modalFormRef" @ok="reset"></dict-item-modal> <!-- 字典数据 -->
  </a-card>
</template>

<script lang="ts" setup>
import { getDictItems, removeDict } from '@/api/dict'
import DictItemModal from './DictItemModal.vue'
import { reactive, ref } from 'vue'
import { Pagination } from '@/config/common'
import { message } from 'ant-design-vue'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue'

const modalFormRef = ref<InstanceType<typeof DictItemModal>>()

const columns = [
  {
    title: '数据值',
    align: 'center',
    dataIndex: 'itemValue'
  },
  {
    title: '名称',
    align: 'center',
    dataIndex: 'itemText'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

const condition = reactive({
  itemText: '',
  itemValue: ''
})

const data = ref<any[]>([])

const loading = ref(false)
const visible = ref(false)
const screenWidth = ref(650)
const dictId = ref('')

const pagination = reactive<Pagination>({
  current: 1,
  pageSize: 10,
  total: 0
})

const loadData = () => {
  loading.value = true
  const {
    current,
    pageSize: size
  } = pagination
  getDictItems({
    current,
    size
  }, {
    ...condition,
    dictId: dictId.value
  }).then(res => {
    data.value = res.records
    pagination.total = res.total
  }).finally(() => {
    loading.value = false
  })
}

const handleRemove = (record: any) => {
  removeDict(record.id).then(() => {
    message.info('删除成功')
    loadData()
  })
}

const handleChange = (page: Pagination) => {
  pagination.current = page.current
  pagination.pageSize = page.pageSize
  loadData()
}

const resetScreenSize = () => {
  const width = document.body.clientWidth
  if (width < 600) {
    screenWidth.value = width
  }
}
resetScreenSize()

const edit = (record) => {
  if (record.id) {
    dictId.value = record.id
  }
  Object.keys(condition).forEach(k => {
    condition[k] = undefined
  })
  visible.value = true
  search()
}

const search = () => {
  pagination.current = 1
  loadData()
}

const reset = () => {
  Object.keys(condition).forEach(k => {
    condition[k] = undefined
  })
  search()
}

const handleAdd = () => {
  modalFormRef.value.add(dictId.value)
  modalFormRef.value.title = '新增'
}
const handleEdit = (record: any) => {
  modalFormRef.value.edit(record)
  modalFormRef.value.title = '编辑'
}

defineExpose({
  edit
})
</script>
<style lang="less" scoped>
:deep(.data-rule-invalid) {
  background: #f4f4f4;
  color: #bababa;
}
</style>
